<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数字时钟</title>
    <link rel="stylesheet" href="css/数字时钟.css">
</head>
<body>
<div id="clock">
    <div id="hrDots" style="--clr: #ff2972"></div>
    <div id="minDots" style="--clr: #fee800"></div>
    <div id="secDots" style="--clr: #04fc43"></div>
</div>

<script>
    function clock() {
        // 获取页面元素
        let hrDots = document.getElementById(`hrDots`)
        let minDots = document.getElementById(`minDots`)
        let secDots = document.getElementById(`secDots`)

        // 获取时间
        var date = new Date()
        // 十二小时进制
        var hours = date.getHours() % 12
        // 区分上午下午
        var amPm = date.getHours() >= 12 ? 'PM' : 'AM'
        hours = hours === 0 ? 12 : hours
        // 获取分钟和秒钟
        var minutes = date.getMinutes()
        var seconds = date.getSeconds()

        var secondsDots = ''
        for (let i = 1; i < 61; i++) {
            let rotation = i * 6
            if (i === seconds) {
                // transform: rotate(旋转角度)
                secondsDots += `<div class="dot active" style="transform: rotate(${rotation}deg)"></div>`
            } else {
                secondsDots += `<div class="dot" style="transform: rotate(${rotation}deg)"></div>`
            }
        }
        var minutesDots = ''
        for (let i = 1; i < 61; i++) {
            let rotation = i * 6
            if (i === minutes) {
                // transform: rotate(旋转角度)
                minutesDots += `<div class="dot active" style="transform: rotate(${rotation}deg)"></div>`
            } else {
                minutesDots += `<div class="dot" style="transform: rotate(${rotation}deg)"></div>`
            }
        }
        var hoursDots = ''
        for (let i = 1; i < 13; i++) {
            let rotation = i * 30
            if (i === hours) {
                // transform: rotate(旋转角度)
                hoursDots += `<div class="dot active" style="transform: rotate(${rotation}deg)"></div>`
            } else {
                hoursDots += `<div class="dot" style="transform: rotate(${rotation}deg)"></div>`
            }
        }

        secDots.innerHTML = `${secondsDots} <h2>${zero(seconds)}<br><span>Seconds</span></h2>`
        minDots.innerHTML = `${minutesDots} <h2>${zero(minutes)}<br><span>Minutes</span></h2>`
        hrDots.innerHTML = `${hoursDots} <b>${amPm}</b><h2>${zero(hours)}<br><span>Hours</span></h2>`
    }

    function zero(number) {
        if (number < 10) {
            return '0' + number
        }
        return number
    }

    // 每秒钟刷新时钟
    setInterval(clock, 1000)
</script>
</body>
</html>